<template>
    <div id="cc" class="echart" style="width: 100%; height: 100%;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const option = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
        }
    ]
})
const initeCharts = () => {
    let myChart = echarts.init(document.getElementById("cc") as HTMLElement);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    // 绘制图表
    myChart.setOption(option.value);
};
onMounted(() => {
    initeCharts();
});
</script>


<style lang="scss" scoped>
.echart {
    background: #fff;
    border-radius: 5px;
}
</style>
